import React from 'react'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
import { actionCreators} from './store'
import { Link } from 'react-router-dom'
import { 
	HeaderWrapper, 
	Logo, GlobalStyle,
	Nav, 
	NavItem, 
	NavSearch, 
	Addition,
	RegisterButton,
	SearchWrapper ,
	SearchInfo,
	SearchInfoTitle,
	SearchInfoSwitch,
	SearchInfoItem,
	SearchInfoList,
} from './style'
import { Button } from 'antd'
import { IconfontGlobalStyle } from '../../statics/iconfont/iconfont'



class Header extends React.Component {
	constructor(props){
		super(props);
	}
	getListArea(show){
		if (show) {
			return(
				<SearchInfo>
					<SearchInfoTitle>
						热门搜索
						<SearchInfoSwitch>换一批</SearchInfoSwitch>
					</SearchInfoTitle>
					<SearchInfoList>
						<SearchInfoItem>教育</SearchInfoItem>
						<SearchInfoItem>体育</SearchInfoItem>
						<SearchInfoItem>游戏</SearchInfoItem>
						<SearchInfoItem>工作</SearchInfoItem>
						<SearchInfoItem>政治</SearchInfoItem>
					</SearchInfoList>
				</SearchInfo>	
			)		
		}else{
			return null;
		}
	}
	loginInterface(){
		this.props.history.push('/login');
	}
	render(){
		const { login } = this.props;
		return(
			<HeaderWrapper>
				<GlobalStyle />
				<IconfontGlobalStyle />
				<Nav>
					<NavItem className='left active'>首页</NavItem>
					<NavItem className='left'>下载APP</NavItem>
					{
						login ? 
						<NavItem className='right'>退出</NavItem> : 
						<Link to='/login'><NavItem className='right'>登录</NavItem></Link>
					}
					<NavItem className='right'>
						<i className='iconfont'>&#xe636;</i>
					</NavItem>
					<SearchWrapper>
						<CSSTransition
							in={this.props.focused}
							timeout={200}
							classNames = "slide"
						>
							<NavSearch 
							className={this.props.focused ? 'focused' : ''}
							onFocus={this.props.handleInputFocus}
							onBlur={this.props.handleInputBlur}
							>
							</NavSearch>
						</CSSTransition>			
						<i className={this.props.focused ? 'focused iconfont' : 'iconfont'}>&#xe6b3;</i>
						{this.getListArea(this.props.focused)}
					</SearchWrapper>					
				</Nav>
				<Addition>		
					<RegisterButton className='writing'>
						<i className='iconfont'>&#xe608;</i>
						写文章
					</RegisterButton>
					<RegisterButton className='reg'>注册</RegisterButton>
				</Addition>
				<Logo href='/' />
			</HeaderWrapper>
		)
	}
}


const mapStateToProps = (state) => {
	return {
		focused: state.getIn(['header', 'focused']),
		login: state.getIn(['login', 'login'])
	}
}
const mapDispatchToProps =(dispatch) => {
	return{
		handleInputFocus(){
			const action = actionCreators.searchFocus();
			dispatch(action);
		},
		handleInputBlur(){
			const action = actionCreators.searchBlur();
			dispatch(action);
		}
	}
}
export default connect(mapStateToProps,mapDispatchToProps)(Header)